<template>
	<view class="contact-page">
		<view class="contact-header">
			<image src="/static/images/contact-banner.jpg" mode="aspectFill" class="header-bg"></image>
			<text class="header-title">联系我们</text>
		</view>
		
		<view class="contact-content">
			<view class="contact-section">
				<text class="section-title">公司地址</text>
				<view class="address-info">
					<text class="address">上海市浦东新区某某路888号</text>
					<text class="postal-code">邮编: 200000</text>
				</view>
			</view>
			
			<view class="contact-section">
				<text class="section-title">联系方式</text>
				<view class="contact-info">
					<view class="info-item">
						<text class="label">电话：</text>
						<text class="value" @tap="makePhoneCall">021-12345678</text>
					</view>
					<view class="info-item">
						<text class="label">邮箱：</text>
						<text class="value">contact@enkilife.com</text>
					</view>
					<view class="info-item">
						<text class="label">工作时间：</text>
						<text class="value">周一至周五 9:00-18:00</text>
					</view>
				</view>
			</view>
			
			<view class="contact-section">
				<text class="section-title">在线留言</text>
				<view class="message-form">
					<input 
						type="text" 
						v-model="form.name" 
						placeholder="您的称呼" 
						class="input-item"
					/>
					<input 
						type="text" 
						v-model="form.phone" 
						placeholder="联系电话" 
						class="input-item"
					/>
					<input 
						type="text" 
						v-model="form.email" 
						placeholder="电子邮箱" 
						class="input-item"
					/>
					<textarea 
						v-model="form.content" 
						placeholder="请输入留言内容" 
						class="textarea-item"
					></textarea>
					<button class="submit-btn" @tap="submitMessage">提交留言</button>
				</view>
			</view>
			
			<view class="contact-section">
				<text class="section-title">关注我们</text>
				<view class="social-media">
					<view class="qrcode-item">
						<image src="/static/images/wechat-qr.jpg" mode="aspectFit" class="qr-img"></image>
						<text class="qr-text">微信公众号</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ContactUs',
	data() {
		return {
			form: {
				name: '',
				phone: '',
				email: '',
				content: ''
			}
		}
	},
	methods: {
		makePhoneCall() {
			uni.makePhoneCall({
				phoneNumber: '021-12345678'
			})
		},
		async submitMessage() {
			if (!this.form.name || !this.form.phone || !this.form.content) {
				uni.showToast({
					title: '请填写必要信息',
					icon: 'none'
				})
				return
			}
			
			try {
				// 这里替换为实际的API调用
				await this.$http.post('/api/contact/message', this.form)
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				this.form = {
					name: '',
					phone: '',
					email: '',
					content: ''
				}
			} catch (e) {
				console.error(e)
				uni.showToast({
					title: '提交失败',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.contact-page {
	.contact-header {
		position: relative;
		height: 300rpx;
		
		.header-bg {
			width: 100%;
			height: 100%;
		}
		
		.header-title {
			position: absolute;
			left: 40rpx;
			bottom: 40rpx;
			color: #fff;
			font-size: 40rpx;
			font-weight: bold;
			text-shadow: 0 2px 4px rgba(0,0,0,0.3);
		}
	}
	
	.contact-content {
		padding: 30rpx;
		
		.contact-section {
			margin-bottom: 50rpx;
			
			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
				display: block;
			}
			
			.address-info {
				background: #f8f8f8;
				padding: 20rpx;
				border-radius: 8rpx;
				
				.address {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.postal-code {
					font-size: 24rpx;
					color: #666;
				}
			}
			
			.contact-info {
				.info-item {
					display: flex;
					margin-bottom: 16rpx;
					
					.label {
						font-size: 28rpx;
						color: #666;
						width: 160rpx;
					}
					
					.value {
						font-size: 28rpx;
						color: #333;
						flex: 1;
					}
				}
			}
			
			.message-form {
				.input-item {
					width: 100%;
					height: 80rpx;
					background: #f8f8f8;
					border-radius: 8rpx;
					padding: 0 20rpx;
					margin-bottom: 20rpx;
					font-size: 28rpx;
				}
				
				.textarea-item {
					width: 100%;
					height: 200rpx;
					background: #f8f8f8;
					border-radius: 8rpx;
					padding: 20rpx;
					margin-bottom: 30rpx;
					font-size: 28rpx;
				}
				
				.submit-btn {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					background: #FF9800;
					color: #fff;
					font-size: 28rpx;
					border-radius: 40rpx;
				}
			}
			
			.social-media {
				display: flex;
				justify-content: center;
				
				.qrcode-item {
					text-align: center;
					
					.qr-img {
						width: 300rpx;
						height: 300rpx;
						margin-bottom: 20rpx;
					}
					
					.qr-text {
						font-size: 26rpx;
						color: #666;
					}
				}
			}
		}
	}
}
</style> 